



        main .heading {
            position: relative;
        }
        main .heading .txt{
            position: absolute;
            left: 50%;
            top: 6.25vw;
            transform: translateX(-50%);
        }
        main .heading .txt *{
            color: #fff;
        }
        
        main .heading .ttl{
            font-size: 4.16vw;
            font-weight: bold;
            margin-bottom: 4.1vw;
        }
        main.filter .heading .ttl{
            text-align: center;
        }
        main .heading .more{
            width: 13vw;
            line-height: 54px;
            border-color: #fff;
            margin-top: 1.5vw;
        }
        main.filter .heading .more{
            margin-left: auto;
            margin-right: auto;
        }
        main .heading .more>*{
            border-color: #fff;
        }
        main .heading .more img{
            width: 16px;
        }

        main .pro{
            padding-top: 90px;
            padding-bottom: 4.1vw;
        }
        main .pro .box{
            flex-wrap: wrap;
            margin-left: -2.1875vw;
        }
        main .pro .item{
            width: calc(100% / 3 - 2.1875vw);
            margin-left: 2.1875vw;
            background: #fff;
            padding-bottom: 64px;
            position: relative;
        }
        main .pro .item:nth-child(n + 4){
            margin-top: 2.1875vw;
        }
        main .pro .item .t{
            padding: 36px;
        }
        main .pro .item .ttl{
            margin-bottom: 18px;
        }
        main .pro .item .ttl span{
            font-size: 24px;
        }
        main .pro .pic{
            position: relative;
            padding-bottom: 100%;
            margin: 40px 0px;
        }
        main .pro .item::before{
            content: '';
            opacity: 0;
            background: rgba(67,193,173,.8);
            transition: all .3s ease-in-out;
            pointer-events: none;
            z-index: 2;
        }
        main .pro .item:hover::before,
        main .pro .item:hover a{
            opacity: 1;
        }
        main .pro .item a{
            width: 11.1vw;
            opacity: 0;
            line-height: 60px;
            background: #002955;
            color: #fff !important;
            z-index: 3;
            position: absolute;
        }
        main .pro .item a span{
            border-color: #fff;
        }
        main .pro .item a span img{
            width: 16px;
        }

        main .cateName{
            font-size: 4.1vw;
            line-height: 9.3vw;
            color: #8797AA;
            background: #E7EBEF;
            text-align: center;
        }
        main .info{
            padding: 4.1vw 0px;
            justify-content: space-between;
        }
        main .info .side{
            width: 20%;
        }
        main .info .side .fCate{
            font-size: 2.59vw;
        }
        main .info .side>span{
            font-size: 12px;
            margin: 1vw 0px;
            display: block;
        }
        main .info .side ul li{
            padding: 1.5vw 0px;
            border-bottom: 1px solid #DDD;
        }
        main .info .side ul li .ttl{
            padding-left: 1.1vw;
            position: relative;
            cursor: pointer;
        }
        main .info .side ul li .ttl::before{
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #002955;
        }
        main .info .side ul li .ttl.hidden img{
            transform: translateY(-50%) rotateX(180deg);
        }
        main .info .side ul li .ttl img{
            width: 10px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0px;
        }
        main .info .side ul li .inner{
            height: 0px;
            overflow: hidden;
            transition: ease-in-out .3s;
        }
        main .info .side ul li .inner .mid{
            padding-top: 1.5vw;
        }
        main .info .side .links a{
            font-size: .7vw;
            margin-bottom: 1vw;
            display: inline-block;
            vertical-align: top;
        }
        main .info .side .links .active a{
            font-size: 1.5vw;
        }
        main .info .side .links p:last-child a{
            margin-bottom: 0px;
        }
        main .info .side .interval{
            justify-content: space-between;
            margin-bottom: .7vw;
        }
        main .info .side .interval input{
            width: 40.625%;
            text-align: center;
            line-height: 1.8vw;
            font-size: 12px;
            border-radius: 35px;
            background: rgba(77,106,137,.08);
        }
        main .info .side .interval input,
        main .info .side .list p{
            color: #4d6a89;
        }
        main .info .side .interval input::placeholder,
        main .info .side .list p.active{
            color: #002955;
        }
        main .info .side .interval i{
            background: #DDD;
            height: 2px;
            width: 10.9375%;
        }
        main .info .side .list{
            overflow: hidden;
            margin-left: -.5vw;
        }
        main .info .side .list p{
            float: left;
            font-size: 12px;
            width: calc(100% / 3 - .5vw);
            margin-left: .5vw;
            position: relative;
            background: rgba(77,106,137,.08);
            border-radius: 2px;
            line-height: 2.6vw;
            text-align: center;
            cursor: pointer;
        }
        main .info .side .list p:nth-child(n + 4){
            margin-top: .5vw;
        }
        main .info .side .list p.active{
            background: #43c1ad;
        }
        main .info .side .list p.active span{
            opacity: 1;
        }
        main .info .side .list p span{
            width: 1vw;
            height: 1vw;
            position: absolute;
            opacity: 0;
            z-index: 2;
            background: #002955;
            right: 0px;
            bottom: 0px;
            clip-path: polygon(100% 0%,100% 100%,0% 100%);
        }
        main .info .side .list p span::before,
        main .info .side .list p span::after{
            content: '';
            position: absolute;
            width: 7px;
            height: 1px;
            top: calc(75% - 1px);
            left: calc(75% - 4px);
            background: #43c1ad;
            transform: rotate(45deg);
        }
        main .info .side .list p span::after{
            transform: rotate(-45deg);
        }
        main .info .side .btns{
            overflow: hidden;
            margin-top: 2.59vw;
        }
        main .info .side .btns p{
            float: left;
            font-size: .7vw;
            text-align: center;
            border-radius: 1.8125vw;
            line-height: 1.8125vw;
            width: 4.6vw;
            margin-right: .5vw;
            cursor: pointer;
            color: #4d6a89;
            background: rgba(77,106,137,.08);
        }
        main .info .side .btns .confirm{
            color: #002955;
            background: #43c1ad;
        }

        main .info .dtls{
            width: 77%;
        }
        main .info .dtls .picTxt{
            justify-content: space-between;
        }
        main .info .dtls .picTxt .palace{
            width: 49.3%;
            position: relative;
        }
        main .info .dtls .picTxt .palace p{
            display: none;
            padding-bottom: 80%;
            position: relative;
        }
        main .info .dtls .picTxt .palace p.active{
            display: block;
        }
        main .info .dtls .picTxt .txt{
            width: 45.1%;
            position: relative;
            flex-direction: column;
        }
        main .info .dtls .picTxt .txt .item::before,
        main .info .dtls .picTxt .txt .item::after{
            content: '';
            position: absolute;
            width: 3px;
            top: 0px;
            left: 0px;
            height: 100%;
            background: #ddd;
        }

        main .info .dtls .picTxt .txt .item{
            flex: 1;
            opacity: .5;
            position: relative;
            padding-left: 2.59vw;
        }
        main .info .dtls .picTxt .txt>p{
            font-size: .7vw;
            padding: 0px 2.59vw;
        }
        main .info .dtls .picTxt .txt .item::after{
            background: #002955;
            opacity: 0;
        }
        main .info .dtls .picTxt .txt .item.active,
        main .info .dtls .picTxt .txt .item.active::after{
            opacity: 1;
        }
        main .info .dtls .picTxt .txt .item .ttl{
            font-size: 1.3vw;
            line-height: 1.4;
            cursor: pointer;
            position: relative;
            padding-left: 1vw;
        }
        main .info .dtls .picTxt .txt .item .ttl::before{
            content: '';
            position: absolute;
            top: .9vw;
            left: 0px;
            width: 5px;
            height: 5px;
            background: #002955;
            transform: translateY(-50%);
            border-radius: 50%;
        }

        main .info .dtls .pro .item{
            padding-bottom: 0px;
        }
        main .info .dtls .pro .item .pic{
            margin: 0px !important;
        }

        main .loading{
            position: fixed;
            z-index: 10000;
            width: 40px;
            height: 40px;
            top: calc(50% - 20px);
            left: calc(50% - 20px);
            transform: scale(.5);
            opacity: 0;
            transition: .3s ease;
            pointer-events: none;
        }
        main .loading.active{
            opacity: 1;
            transform: scale(.8);
        }
        main .loading span{
            position: absolute;
            border-radius: 4px;
            background: #333;
            width: 4px;
            height: 16px;
            left: calc(50% - 2px);
            bottom: calc(50% + 10px);
            transform-origin: center calc(100% + 10px);
            animation: breather linear .4s infinite;
            animation-delay: 30ms;
            /*
            width: 30px;
            height: 3px;
            left: calc(50% - 15px);
            bottom: calc(50% + 10px);
            transform-origin: 0% 10px;
            transform-origin: center 10px;
            */
        }
        @keyframes breather{
            0%{
                opacity: 0;
            }50%{
                opacity: 1;
            }100%{
                opacity: 0;
            }
        }
        main .loading span:nth-child(2){
            transform: rotate(30deg);
            animation-delay: 60ms;
        }
        main .loading span:nth-child(3){
            transform: rotate(60deg);
            animation-delay: 90ms;
        }
        main .loading span:nth-child(4){
            transform: rotate(90deg);
            animation-delay: 120ms;
        }
        main .loading span:nth-child(5){
            transform: rotate(120deg);
            animation-delay: 150ms;
        }
        main .loading span:nth-child(6){
            transform: rotate(150deg);
            animation-delay: 180ms;
        }
        main .loading span:nth-child(7){
            transform: rotate(180deg);
            animation-delay: 210ms;
        }
        main .loading span:nth-child(8){
            transform: rotate(210deg);
            animation-delay: 240ms;
        }
        main .loading span:nth-child(9){
            transform: rotate(240deg);
            animation-delay: 270ms;
        }
        main .loading span:nth-child(10){
            transform: rotate(270deg);
            animation-delay: 300ms;
        }
        main .loading span:nth-child(11){
            transform: rotate(300deg);
            animation-delay: 330ms;
        }
        main .loading span:nth-child(12){
            transform: rotate(330deg);
            animation-delay: 350ms;
        }

        main .info .dtls .pro>.more{
            width: 180px;
            margin: 0 auto;
            margin-top: 2.59vw;
        }
        main .info .dtls .pro>.more span{
            transform: translateY(-50%) rotate(90deg);
        }
        main .info .dtls .pro>.more img{
            width: 14px;
        }
        
        main.filter .info .pro{
            padding-top: 0px;
        }
        main.filter .info .pro .item .pic{
            margin-bottom: 40px !important;
        }
        
        @media(max-width:1600px){
            main .heading .more{
                line-height: 45px;
            }

            main .pro{
                padding-top: 5.2vw;
            }
            main .pro .item{
                padding-bottom: 4vw;
            }
            main .pro .item .t{
                padding: 2vw;
            }
            main .pro .item .ttl{
                margin-bottom: 15px;
            }
            main .pro .item .ttl span{
                font-size: 1.29vw;
            }
            main .pro .pic{
                margin: 1.6vw 0px;
            }
            main .pro .item a{
                line-height: 3.6vw;
            }   

            main.filter .info .pro .item .pic{
                margin-bottom: 1.6vw !important;
            }

            main .info .dtls .pro>.more{
                width: 9vw;
            }
        }

        @media(max-width:1200px){
            main .heading .more{
                width: 140px;
                line-height: 36px;
            }
            main .heading .more span{
                width: 24px;
                height: 24px;
            }

            main .pro .item a{
                line-height: 36px;
                width: 120px;
            }
            main .pro .item a span{
                width: 24px;
                height: 24px;
            }

            main .info .dtls .pro>.more{
                width: 110px;
            }
            main .info .side .list p{
                width: calc(50% - .5vw);
            }
            main .info .side .list p:nth-child(3){
                margin-top: .5vw;
            }
        }

        @media(max-width:767px){
            main .heading{
                height: 53vw;
            }
            main .heading .pic{
                height: 100%;
            }
            main .heading .pic img{
                height: 100%;
                object-fit: cover;
            }
            main .heading .txt{
                top: 50%;
                transform: translateY(-50%);
                left: 0px;
                padding: 0px 5.3vw;
            }
            main .heading .ttl{
                font-size: 8vw;
            }
            main .heading .more{
                line-height: 32px !important;
            }
            main .heading .more span{
                display: block;
            }

            main .pro{
                padding: 5.3vw;
            }
            main .pro .box{
                margin-left: 0px;
            }
            main .pro .item{
                width: 100%;
                margin-left: 0px;
                margin-top: 5.3vw !important;
                padding-bottom: 5.3vw;
            }
            main .pro .item:first-child{
                margin-top: 0px !important;
            }
            main .pro .item .t{
                padding: 5.3vw;
            }
            main .pro .item .ttl{
                font-size: 4vw;
            }
            main .pro .item .ttl span{
                font-size: 3vw;
            }
            main .pro .item .des{
                font-size: 3.19vw;
            }

            main .cateName{
                line-height: 23.8vw;
                font-size: 8vw;
            }
            main .info{
                padding: 5.3vw;
                display: block;
            }
            main .info>*,
            main .info .dtls .picTxt>*{
                width: 100% !important;
            }
            main .info .side .fCate{
                font-size: 6.6vw;
            }
            main .info .side>span{
                font-size: 2.7vw;
                margin: 2.7vw 0px;
            }
            main .info .side ul li{
                padding: 4vw 0px;
            }
            main .info .side ul li .inner .mid{
                padding: 2.7vw;
            }
            main .info .side ul li .ttl{
                font-size: 3.19vw;
                padding-left: 2.7vw;
            }
            main .info .side .links a{
                font-size: 2.7vw;
                margin-bottom: 2.7vw;
            }
            main .info .side .links .active a{
                font-size: 4vw;
            }
            main .info .side .interval input{
                line-height: 9.3vw;
                border-radius: 9.3vw;
            }
            main .info .side .btns{
                margin-top: 5.3vw;
            }
            main .info .side .btns p{
                width: 40vw;
                margin-right: 1.35vw;
                line-height: 9.3vw;
                border-radius: 9.3vw;
            }
            main .info .side .btns .reset{
                float: right;
                
            }
            main .info .side .list p{
                width: calc(25% - 1.38vw);
                margin-left: 1.38vw;
                margin-top: 0px !important;
                line-height: 9.3vw;
            }
            main .info .side .interval{
                margin-bottom: 4vw;
            }
            main .info .dtls .picTxt{
                display: block;
                margin-top: 5.3vw;
            }
            main .info .dtls .picTxt .txt{
                margin-top: 5.3vw;
            }
            main .info .dtls .picTxt .txt .item{
                padding-left: 6.6vw;
            }
            main .info .dtls .picTxt .txt .item .ttl{
                font-size: 3.7vw;
                padding-left: 2.7vw;
            }
            main .info .dtls .picTxt .txt .item .ttl::before{
                top: 1.35vw;
            }
            main .info .dtls .picTxt .txt>p{
                font-size: 2.7vw;
                padding: 0px 6.6vw;
            }
            main .info .dtls .pro{
                padding: 0px;
                margin-top: 5.3vw;
            }
            main .info .dtls .pro>.more{
                margin-top: 5.3vw;
                font-size: 16px;
                line-height: 36px !important;
                width: 120px;
            }
            main .info .dtls .pro>.more span{
                width: 24px;
                height: 24px;
                display: block;
            }
            
        }
        
        @media(max-width:500px){
            main .heading .more{
                width: 120px;
                line-height: 23px !important;
            }
            main .heading .more span{
                display: none;
            }
         
            main .info .dtls .pro>.more{
                font-size: 12px;
                line-height: 23px !important;
                width: 70px;
            }
            main .info .dtls .pro>.more span{
                display: none;
            }
        }